<template>
    <div id="home">
        <button  class="sp-home" @click="increment">点击了：{{ num }} 次</button>
        <div class="mytext">我是空的</div>
    </div>
    <son1></son1>
    <son2></son2>
</template>
<script setup>
/**
 * 使用setup的2种方式：
 * 第1种：在<script>标签中直接加标签中直接加 setup 属性，这种方式不需要 export default;
 * 第2种：需要 export default 导出 setup函数，并需要在setup中返回定义的变量,方法,计算属性；
 */
import son1 from './components/son1.vue';
import son2 from './components/son2.vue';
import { ref, reactive, onMounted, watch} from 'vue'
const num = ref(0);
const state = reactive({count: 1});
function increment() {
    const myTextDom = document.querySelector('.mytext');
    num.value ++;
    state.count *= num.value;
    myTextDom.innerHTML = state.count;
}
//侦听一个reactive
watch(() => state.count, (newCt, oldCt) => {
    alert(`state.count 从 ${oldCt} 变成了 ${newCt}`)
});
//侦听一个ref
watch(num,(newNum,oldNum) => {
    console.log('num发生变化',newNum,oldNum)
})
onMounted(() => {console.log(`计数器初始值为 ${num.value}`)});
</script>
<script>
    export default {
        components: {
            son1,
            son2,
        }
    }
</script>
<style lang="scss">
    #home{
        .sp-home{
            color: red;
            font-size: 20px;
            margin: 20px 0;
        }
    }
</style>